<template>
  <a-drawer
    :width="720"
    title="编辑部门"
    @close="show=false"
    :visible="show"
    :wrapStyle="drawerBody"
  >
    <a-form :form="form">
      <a-form-item hidden label="id" >
        <a-input v-decorator="['id']"/>
      </a-form-item>
      <a-form-item label="部门名称" v-bind="formItemLayout">
        <a-input v-decorator="field('name','部门名称')"/>
      </a-form-item>
    </a-form>
    <div :style="drawerBottom">
      <a-button :style="{marginRight: '8px'}" @click="dialog.show=false">
        取消
      </a-button>
      <a-button @click="submitForm" type="primary">确定</a-button>
    </div>
  </a-drawer>
</template>

<script>

import { pick } from 'lodash'
import { field, drawerBody, drawerBottom } from '@/utils/util'
import { updateDept } from '@/api/dept'

const formFields = ['id', 'name', 'parent', 'parents']

export default {

  name: 'EditDeptDialog',

  data () {
    return {
      drawerBody,
      drawerBottom,
      formItemLayout: {
        labelCol: {span: 5},
        wrapperCol: {span: 19}
      },
      form: this.$form.createForm(this),
      show: false,
      temp: {}
    }
  },

  props: {

  },

  created () {

  },

  methods: {
    field,

    submitForm () {
      this.doUpdateDept()
    },

    doUpdateDept () {
      this.form.validateFields((errors, values) => {
        const data = pick(values, ['id','name'])
        if (!errors) {
          updateDept(data).then(resp => {
            this.show = false
            this.temp.id = data.id
            this.temp.name = data.name
            let newRow = this.temp
            this.$emit('success', newRow)
          })
        }
      })
    },

    open (row) {
      this.show = true
      this.temp = pick(row, formFields)
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(row, ['id','name']))
      })
    },

    close () {
      this.show = false
    }

  }

}
</script>
